<template>
    <div :class="['el-type',{'gray':isDisabled}]" @click="change">
        <i v-if="!isAdd">+</i>
        {{type}}
        <i v-show="isAdd && !isDisabled && status" @click.stop="$emit('changeNav',id)">x</i>
    </div>
</template>

<script>
export default {
    props:['type','isAdd','isDisabled','status','id'],
    methods:{
        change(){
            
            if(!this.isAdd){
                console.log("===----")
                this.$emit('changeNav',this.id)
            }
        }
    }
}
</script>

<style lang="scss">
    .el-type{
        display: inline-block;
        border:1px solid black;
        padding:0 4px;
        margin:10px;
    }

    .gray{
        border-color:red;
    }
</style>